import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input} from '@tarojs/components'
import './Evaluate.css'
import { AtAvatar, AtList, AtListItem, AtInput, AtForm, AtButton, AtGrid,AtSearchBar,AtTag,AtRate,AtTextarea } from "taro-ui"
import triangle from '../../img/triangle.png'
import app from '../../main';


export default class Index extends Component {

    config = {
        navigationBarTitleText: '服务评价'
    }
    constructor () { 
        super(...arguments); 
        this.state = {
            value: '0',
            values: '',
            text:'匿名评价',
            texti:'○',
            color:'',
            textA:'font-size: 18px ; color:black' ,
            textB:'font-size: 15px ; color:#6d6d6d;' ,
            iconA:'width: 50px; height: 50px;',
            boolean:[],
            doctor:'',
            pingjia:[
                {name: '讲解详细', checked: false},
                {name: '回复及时', checked: false},
                {name: '建议很有帮助', checked: false},
                {name: '态度非常好', checked: false},
                {name: '专业又有耐心', checked: false},
                {name: '非常敬业', checked: false}
            ],
            tags:[],
            anonymous:0,
        }
    }
    handleChange (value) {
        this.setState({
            value
        })
    }
    textChange (event) {
        console.log(event.detail.value)
        this.setState({
            values: event.detail.value
        })
    }
    colorChange(){
        if(this.state.color==''){
            this.setState({
                anonymous:0,
                color:'color: #72d021;',
                texti:'●',
            })
        }else{
            this.setState({
                anonymous:1,
                color:'',
                texti:'○',
            })
        }
    }
    buttonChange(name,e){
        var list = this.state.pingjia;
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            if (item.name == name) {
                item.checked = !item.checked;
            }
        }

        this.setState({
            pingjia: list
        })
    }

    // 医生
    getDoctor() {
        let me = this
        let data = { doctor_id: this.$router.params.doc_id }
        console.log(data)
        app.post('web/members/doctorHome', data, function (res) {
            me.setState({
                doctor: res.data.result
            })
        })
    }

    //post 医生
    postDoctor(){
        let me = this
        if(this.state.value == 0){
            Taro.showModal({
                title: '提示',
                content: '评分最少为1颗星',
                showCancel:false
            })
            return;
        }
        if(this.state.values == ''){
            Taro.showModal({
                title: '提示',
                content: '请先填写评价再提交',
                showCancel:false
            })
            return;
        }
        if(this.state.values.length < 5){
            app.alertTab('评价不小于5个字')
            return;
        }
        var impressions = [];
        var list = this.state.pingjia;
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            if (item.checked) {
                impressions.push(item.name);
            }
        }
        
        let data = {
            inquiry_order_id: this.$router.params.id,
            doctor_id:this.$router.params.doc_id,
            impression:impressions.join(','),
            rate:this.state.value,
            content:this.state.values,
            is_hide:this.state.anonymous,
        }
        console.log('data', data);
        app.post('web/estimate/serviceEvaluation', data, function(res){
            if(res.data.status == 200){
                app.success('提交成功', function(res) {
                    setTimeout(() => {
                        Taro.navigateBack({
                            delta: 2
                        })
                    }, 1000)
                });
            }else{
                Taro.showModal({
                    title: '提示',
                    content: '提交失败',
                    showCancel:false
                })
                return;
            }     
        })
    }

    componentWillMount(){
        this.getDoctor();
    }

  render () {
    return (
      <View className='index'>

        <View class='information'> 
            <Image className='head' src={this.state.doctor.head_image} style={this.state.iconA}/>
            <View className='name' style={this.state.textA}>{this.state.doctor.name}</View>
            <View className='doctor' style={this.state.textB}>{this.state.doctor.positional_title}</View>
            <View className='hospital' style={this.state.textB}>{this.state.doctor.hospital}</View>
        </View>
                
        <View>
            <Image className='triangle' src={triangle}/>
        </View>

        <View className='tagbox'>
            <View className='text'>本次服务哪些让你印象深刻？</View>
                <View className='btnBox'>
                    {
                        this.state.pingjia.map((item,index) =>{
                            return(
                                <View onClick={this.buttonChange.bind(this,item.name)}  className='inline'>
                                    <AtTag className='tag' type='primary' circle active={item.checked}>
                                        <View className='btnText' data-index={index}>{item.name}</View>
                                    </AtTag>
                                </View>
                            )
                        })
                    }              
                </View>
             </View>

            <View className='rateBox'>
                <View className='rateText'>综合评分：</View>
                <AtRate className='rate' value={this.state.value} size='30' onChange={this.handleChange.bind(this)}/>
            </View>

            <View className='box'>
                <View className='textareaBox'>
                    <AtTextarea
                        className='textarea'
                        count={false}
                        value={this.state.values}
                        onChange={this.textChange.bind(this)}
                        maxLength={500}
                        height='200'
                        placeholder='填写你的真实服务感受，感谢医生，分享经验等'
                    />
                </View>
                <View className='iconText' style={this.state.color} onClick={this.colorChange}>{this.state.texti}</View> 
                <View className='hideText' style={this.state.color} onClick={this.colorChange}>{this.state.text}</View> 
            </View>

            <AtButton  className='greenbtn' type='primary' onClick={this.postDoctor.bind(this)}>提交</AtButton>

      </View>
    )
  }
}
